<template>
	<view class="">
		<navBar :title="props.processDesc"></navBar>
		<handling v-if="dataList.result !== 1" :text="text" @statusdetails="statusdetails"></handling>
		<view v-if="dataList.result !== 1" class="w-100% h-1rpx" style="background-color: #EEEEEE;"></view>
		<view class="" v-if="status === 1">
			<subtitle titleText="派工单信息"></subtitle>
			<dispatchOrderInformation :proTaskList="proTaskList"></dispatchOrderInformation>
			<view class="w-100% h-16rpx" style="background-color: #EEEEEE;"></view>
			<subtitle titleText="质检信息"></subtitle>
			<view class="w-100% pl-48rpx pr-48rpx pb-16rpx text pt-12rpx">
				<view class="w-100% textPadding">
					质检人：{{ dataList.checkName }}
				</view>
				<view class="w-100% textPadding">
					质检时间：{{ dataList.checkDate }}
				</view>
				<view class="w-100% textPadding">
					质检结果：
					<span class="qualityText" style="color: #36C659;" v-if="dataList.result === 1">
						合格
					</span>
					<span class="qualityText" style="color: #E52B2B;" v-else>
						不合格
					</span>
				</view>
			</view>
			<view class="w-100% h-16rpx" style="background-color: #f5f5f5;"></view>
			<subtitle titleText="检验结果"></subtitle>
			<inspectionResultsTable :inspectionResultsList="inspectionResultsList"></inspectionResultsTable>
		</view>
		<view class="" v-else>
			<detailsOfDefects :badnessList="badnessList"></detailsOfDefects>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import navBar from '@/components/navbar.vue'
	import handling from '@/components/handling.vue'
	import subtitle from '@/components/subtitle.vue'
	import dispatchOrderInformation from '@/components/dispatchOrderInformation.vue'
	import inspectionResultsTable from '@/components/inspectionResultsTable.vue'
	import detailsOfDefects from '@/components/detailsOfDefects.vue'
	import { queryCheckResultByTaskId, queryUnQuaCheckByTaskId } from '@/common/api/operationApi'
	import { ref, onMounted } from 'vue'
	const text = ref<any>({
		text1: '检查结果',
		text2: '不良原因'
	})
	const props = defineProps<{
		processDesc ?: string;
		prodWorkList ?: string | [];
		id ?: string | []
	}>()

	const status = ref<number>(1)
	const statusdetails = (val : any) => {
		status.value = val
		if (val === 1) {
			doneList()
		} else {
			causeList()
		}
	}

	onMounted(() => {
		doneList()
	})
	const dataList = ref<{}>({})
	const proTaskList = ref<string[]>([])
	const inspectionResultsList = ref<string[]>([])
	async function doneList() {
		const data = await queryCheckResultByTaskId({
			taskId: props.id,
			taskType: 11
		})
		dataList.value = data
		proTaskList.value = data.proTaskList
		inspectionResultsList.value = data.item
	}
	const badnessList = ref<string[]>([])
	async function causeList() {
		const data = await queryUnQuaCheckByTaskId({
			taskId: props.id
		})
		badnessList.value = data
	}
</script>
<style scoped>
	.text {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4B4D55;
	}

	.textPadding {
		padding: 12rpx 0rpx;
	}

	.qualityText {
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
	}
</style>